<template>
  <div class="chart" ref="chartRef"></div>
</template>

<script setup lang="ts" name="Chart">
import charts, { ChartInstance, ECOption } from "./index";
const props = defineProps<{ option: ECOption }>();

const chartRef = ref<HTMLDivElement>();
// const chartInstance = ref<echarts.ECharts>();
// onMounted(() => {
//   chartInstance.value = echarts.init(chartRef.value);
//   chartInstance.value.setOption(props.option);
// });
// defineExpose({ chartInstance });

let chartInstance: ChartInstance | null = null;
function getChartInstance() {
  return chartInstance;
}
onMounted(() => {
  chartInstance = charts.init(chartRef.value);
  chartInstance.setOption(props.option);
});
defineExpose({ getChartInstance });
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
